<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个性化健康建议</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
    <style>

        .search-bar input {
            padding: 5px;
            margin-right: 5px;
        }

        .section {
            padding: 20px;
            background: #fff;
            margin: 20px auto;
            max-width: 800px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .advice-section {
            margin-bottom: 20px;
        }

        button {
            background-color: #0066cc;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #004080;
        }

        #chatbot input {
            margin-top: 10px;
            width: 80%;
            padding: 10px;
        }
    </style>
</head>
<body>
<header>
    <h1>老年人健康档案服务平台</h1>
</header>

<!-- 导航栏 -->
<nav>
    <div>
        <a href="{{ url_for('index') }}">首页</a>
	<a href="{{ url_for('health_data') }}">健康档案</a>
	<a href="{{ url_for('health_analysis') }}">健康分析</a>
	<a href="{{ url_for('personal_advice') }}">个性化建议</a>
	<a href="{{ url_for('community') }}">健康社区</a>
	<a href="{{ url_for('contact') }}">联系我们</a>

    </div>
    <div class="search-bar">
        <input type="text" id="search-input" placeholder="全文搜索...">
        <button onclick="searchArticles()">搜索</button>
    </div>
</nav>

<!-- 个性化健康建议 -->
<div class="section" id="personal-advice">
    <h2>个性化健康建议</h2>
    <p>根据您的健康状况，我们为您提供以下改善方案：</p>

    <!-- 动态更新内容 -->
    <div class="advice-section" id="dynamic-advice">
        <h3>动态建议</h3>
        <p>您的最新分析结果正在加载，请稍候...</p>
        <button onclick="fetchAdvice()">获取最新建议</button>
    </div>

    <h3>饮食建议</h3>
    <ul id="diet-advice">
        <li>早餐建议：全麦面包、低脂牛奶、一颗水煮蛋。</li>
        <li>午餐建议：少盐清蒸鱼、糙米饭、炒绿色蔬菜。</li>
        <li>晚餐建议：燕麦粥、时令水果（如苹果）。</li>
    </ul>

    <h3>运动计划</h3>
    <ul id="exercise-plan">
        <li>每日步行不少于 5000 步。</li>
        <li>每周进行 3 次低强度瑜伽或健身操。</li>
    </ul>

    <h3>心理健康</h3>
    <ul>
        <li>每天冥想 10 分钟，缓解压力。</li>
        <li>多参加社区活动，与朋友交流。</li>
    </ul>

    <!-- 在线客服 -->
    <h4>在线客服</h4>
    <div id="chatbot">
        <p>您好！请告诉我您的问题，我会尽力帮您解决。</p>
        <input type="text" id="chat-input" placeholder="输入您的问题...">
        <button onclick="startChat()">提交</button>
    </div>
</div>

<!-- 页脚 -->
<footer>
    <p>© 2024 老年人健康档案服务平台 | 地址: 北京市某区某街道100号</p>
    <p>友情链接: <a href="https://www.who.int" target="_blank">世界卫生组织</a> | <a href="https://www.nhc.gov.cn" target="_blank">国家卫生健康委员会</a></p>
</footer>

<script>
    // 动态获取健康建议
    function fetchAdvice() {
        const adviceSection = document.getElementById('dynamic-advice');
        adviceSection.innerHTML = `
            <h3>最新健康建议</h3>
            <ul>
                <li>血压偏高：建议减少盐分摄入，增加富钾食物。</li>
                <li>血糖值略高：控制每日糖分摄入不超过 20 克。</li>
                <li>运动建议：适量进行有氧运动，每次 30 分钟。</li>
            </ul>
        `;
    }

    // 模拟与智能客服互动
    function startChat() {
        const chatInput = document.getElementById('chat-input');
        const userMessage = chatInput.value;

        if (userMessage.trim() !== '') {
            alert(`客服回复：我们收到您的问题 "${userMessage}"，稍后将为您提供详细答复！`);
            chatInput.value = '';
        } else {
            alert('请输入您的问题！');
        }
    }
</script>

<script>
    // 搜索功能，跳转至健康社区页面并传递搜索关键词
    function searchArticles() {
        const query = document.getElementById('search-input').value.trim();
        if (query) {
            window.location.href = "{{ url_for('community') }}?search=" + encodeURIComponent(query);
        } else {
            alert('请输入搜索内容！');
        }
    }
</script>


</body>
</html>
